import React from 'react';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

const imageOne = require('../../assets/gn/gn_1.png')
const imageTwo = require('../../assets/gn/gn_2.png')
const imageThree = require('../../assets/gn/gn_3.png')
const imageFour = require('../../assets/gn/gn_4.png')
const imageFive = require('../../assets/gn/gn_5.png')

class Content extends React.Component {

  static defaultProps = {
    className: 'content11',
  };

  getDelay = e => e % 3 * 100 + Math.floor(e / 3) * 100 + 300;

  render() {
    const props = { ...this.props };
    delete props.isMode;
    const oneAnim = { y: '+=30', opacity: 0, type: 'to', ease: 'easeOutQuad' };
    const blockArray = [
      { icon: imageOne, title: '全程服务', content: '售前咨询，下单24小时内响应，关键环节100%提醒' },
      { icon: imageTwo, title: '品质保障', content: '所有产品保证服务质量由专业人士进行操作' },
      { icon: imageThree, title: '价格透明', content: '除服务收费之外，再无其他额外费用' },
      { icon: imageFour, title: '急速办理', content: '工作日当天提交到工商，办理进度实时可查' },
      { icon: imageFive, title: '信息安全', content: '所有客户信息严格保密，保护客户信息免遭外泄' },
    ];
    const children = blockArray.map((item, i) => {
      const id = `block${i}`;
      const delay = this.getDelay(i * 1);
      const liAnim = { opacity: 0, type: 'from', ease: 'easeOutQuad', delay };
      const childrenAnim = { ...liAnim, x: '+=10', delay: delay + 100,};
      return (<TweenOne
        component="div"
        animation={liAnim}
        key={i}
        className="cell"
        id={`${props.id}-${id}`}
      >
        <TweenOne
          animation={{ x: '-=10', opacity: 0, type: 'from', ease: 'easeOutQuad' }}
          className="img"
          key="img"
        >
          <img src={item.icon} width="100%" />
        </TweenOne>
        <div className="text">
          <TweenOne key="h1" animation={childrenAnim} component="h1">
            {item.title}
          </TweenOne>
          <TweenOne key="p" animation={{ ...childrenAnim }} component="p">
            {item.content}
          </TweenOne>
        </div>
      </TweenOne>);
    });
    return (
      <div {...props} className={`content-template-wrapper ${props.className}-wrapper`}>
        <div
          className={`content-template ${props.className}`}
        >
          <QueueAnim
            key="ul"
            type="bottom"
            className={`${props.className}-contentWrapper`}
            id={`${props.id}-contentWrapper`}
          >
            <div className={`${props.className}-contentWrapper-r`} key="ul">
              {children}
            </div>
          </QueueAnim>
        </div>
      </div>
    );
  }
}


export default Content;
